<template>
  <div style="padding: 10px; height: 100vh; display: flex; flex-direction: column; background-color: #f9f9f9;">
    <!-- 图表区域 -->
    <div style="flex: 1; position: relative; background-color: white; border-radius: 12px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); padding: 20px;">
      <div id="financeChart" style="height: 100%; width: 100%;"></div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  name: "HotelRoom",
  components: {},
  data() {
    return {
      form: {},
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      chart: null,
      small: false,
      disabled: false,
      background: true,
      selectedIds: []
    }
  },
  methods: {
    handleSizeChange() {
      this.load(); // 重新刷新表格数据
    },
    handleCurrentChange() {
      this.load(); // 重新刷新表格数据
    },
    load() {
      request.get("/admin/getFinanceAcount", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.initChart();
      });
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(document.getElementById('financeChart'));

      const categories = this.tableData.map(item => item.roomId);
      const amounts = this.tableData.map(item => item.totalAmount);

      const option = {
        title: {
          text: '酒店房间财务统计',
          left: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: categories,
          axisLabel: {
            interval: 0,
            rotate: 45,
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        series: [
          {
            name: '总金额',
            type: 'bar',
            data: amounts,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#5470c6'},
                    {offset: 1, color: '#83bff6'}
                  ]
              )
            }
          }
        ]
      };

      this.chart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', this.resizeChart);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    }
  },
  created() {
    this.load();
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.resizeChart);
  }
}
</script>

<style scoped>
.el-input__inner {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#financeChart {
  height: 100%;
  width: 100%;
}

/* 页面整体样式 */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* 图表容器样式 */
.chart-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 按钮样式 */
.styled-button {
  background-color: #ffaa50; /* 橘色背景 */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-weight: bold;
}

.styled-button:hover {
  background-color: #ffcc80; /* 鼠标悬停时的背景颜色 */
  transform: scale(1.05);
}

.styled-button:active {
  transform: scale(0.95);
}

/* 输入框样式 */
.styled-input {
  border-radius: 20px; /* 输入框圆角 */
  border: 1px solid #ffaa50; /* 输入框边框颜色 */
  padding: 12px 20px;
  transition: border-color 0.3s;
}

.styled-input:focus {
  border-color: #ffaa50; /* 输入框聚焦时的边框颜色 */
}

/* 表格样式 */
.styled-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s;
}

.styled-table:hover {
  transform: scale(1.05);
}

/* 分页样式 */
.styled-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

/* 对话框样式 */
.styled-dialog {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s;
}

.styled-dialog:hover {
  transform: scale(1.05);
}

/* 表单样式 */
.styled-form {
  padding: 20px;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>